<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单验证</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        label {
            margin-right: 50px;
        }
    </style>
</head>

<body>
    <form action="">
        <label for="account">账号
            <input type="text" id="account">
            <span></span>
        </label>
        <br>
        <label for="user">昵称
            <input type="text" id="user">
            <span></span>
        </label>
        <br>
        <label for="mail">邮件
            <input type="text" id="mail">
            <span></span>
        </label>
        <br>
        <label for="card">身份证
            <input type="text" id="card">
            <span></span>
        </label>
        <br>
        <label for="phone">手机号码
            <input type="text" id="phone">
            <span></span>
        </label>
        <br>
        <label for="birthday">生日
            <input type="text" id="birthday">
            <span></span>
        </label>
        <br>
        <label for="passward">密码
            <input type="text" id="passward">
            <span></span>
        </label>
        <br>
        <label for="passSure">确认密码
            <input type="text" id="passSure">
            <span></span>
        </label>
        <br>
        <button>提交</button>
    </form>
</body>
<script>
    let account = document.getElementById('account');
    let user = document.getElementById('user');
    let mail = document.getElementById('mail');
    let card = document.getElementById('card');
    let birthday = document.getElementById('birthday');
    let passward = document.getElementById('passward');
    let passSure = document.getElementById('passSure');
    let btn = document.querySelector('button');
    let span = document.querySelectorAll('span');


    account.onblur = () => {
        let str = account.value;
        //以字母开头,不能使用特殊字符（只能使用数字、字母、下划线、横杠）,长度6-20
        let reg = /^[a-zA-Z][\w-]{5,19}/;
        let res = reg.test(str);
        span[0].innerHTML = res ? '成功' : '请输入以字母开头,数字、字母、下划线、横杆';
    }

    user.onblur = () => {
        let str = user.value;
        //昵称只能输入3-6个中文 
        let reg = /[\u4e00-\u9fa5]{3,6}/;
        let res = reg.test(str);
        span[1].innerHTML = res ? '成功' : '昵称只能输入3-6个中文';
    }

    mail.onblur = () => {
        let str = mail.value;
        let reg = /^[a-zA-Z][\w-]+@163\.(com|cn|net)$/;
        let res = reg.test(str);
        span[2].innerHTML = res ? '成功' : '请输入正确格式';
    }

    card.onblur = () => {
        let str = card.value;
        //身份证后面不知大写还是小写,先默认小写
        let reg = /^\d{17}[\dx]$/;
        let res = reg.test(str);
        span[3].innerHTML = res ? '成功' : '请输入18位身份证号码';
    }


    phone.onblur = () => {
        let str = phone.value;
        let reg = /^1[3-8]\d{9}$/;
        let res = reg.test(str);
        span[4].innerHTML = res ? '成功' : '请输入11位电话号码';
    }

    birthday.onblur = () => {
        let str = birthday.value;
        let reg = /^\d{4}(-|\/)?(0[1-9]|1[0-2])\1(0[1-9]|[1-2]\d|3[0-1])$/;
        let res = reg.test(str);
        span[5].innerHTML = res ? '成功' : '请输入正确的生日格式';
    }

    passward.onblur = () => {
        let str = passward.value;
        let reg = /^\S{20,}$/;
        let res = reg.test(str);
        span[6].innerHTML = res ? '成功' : '请输入密码';
    }

    btn.onclick = function () {
        if (passward.value || passSure.value) {
            passward.value == passSure.value ? alert('注册成功') : alert('注册失败');
        } else {
            alert('请输入值密码');
        }
    }

</script>

</html>